<template>
  <view class="good_detail">
    <!-- 头部标题 -->
    <view class="navigation_bg" @tap="backref()">
      <view class="navigation">
        <view class="navigation_back">
          <uni-icons type="back" size="24" color="#fff"></uni-icons>
        </view>
        <view class="navigation_title"> 店铺详情 </view>
      </view>
    </view>

    <view class="good_con">
      <!-- tabs -->
      <view class="good_tabs" style="margin-top: 20px">
        <view
          class="good_tab"
          v-for="(item, index) in goodTab"
          :key="index"
          :class="goodType == item.type ? 'active' : ''"
          @tap="changeTab(item)"
        >
          {{ item.name }}
          <view class="good_tab_line"> </view>
        </view>
      </view>

      <!-- 点餐 -->
      <view class="good_con_detail" v-if="goodType == 1">
        <!-- 左侧边栏 -->
        <scroll-view
          scroll-with-animation
          scroll-y="true"
          :scroll-into-view="leftScrollInto"
          style="width: 20%"
        >
          <view class="good_con_aside">
            <view
              class="good_aside_tab"
              v-for="(item, index) in typeList"
              :id="`nav${index}`"
              :key="index"
              :class="leftIndex == index ? 'active' : ''"
              @click="selectType(index)"
            >
              {{ item.name }}
            </view>
          </view>
        </scroll-view>
        <!-- 右侧菜品列表 -->
        <scroll-view
          scroll-with-animation
          :scroll-into-view="scrollInto"
          scroll-y="true"
          :show-scrollbar="false"
          @scroll="rightScroll"
        >
          <view
            class="good_con_list"
            v-for="(_, i) in typeAndGoodList"
            :id="`nav${i}`"
            :key="_.id"
          >
            <view class="good_con_list_title">
              {{ _.name }}
            </view>
            <view
              class="good_con_item"
              v-for="(item, index) in _.goodsList"
              :key="item.id"
            >
              <view class="good_con_item_img">
                <image
                  v-if="item.goodsImg"
                  :src="domain + item.goodsImg"
                ></image>
              </view>
              <view class="good_con_item_info">
                <view class="good_con_item_title">
                  {{ item.name }}
                </view>
                <view class="good_con_item_price"> ¥{{ item.price }} </view>

                <view
                  class="good_con_item_type"
                  v-if="item.specType == 2"
                  @tap="selectSpecs(item, index)"
                >
                  规格
                  <view class="good_con_item_type_num" v-if="item.num > 0">
                    {{ item.num }}
                  </view>
                </view>

                <view class="good_con_item_nums" v-if="item.specType == 1">
                  <view class="good_con_item_dec" @tap="decGood(item, index)">
                    <image src="../../static/image/shop/min.png"></image>
                  </view>
                  <view class="good_con_item_num">
                    {{ item.num }}
                  </view>
                  <view class="good_con_item_add" @tap="addGood(item, index)">
                    <image src="../../static/image/shop/add.png"></image>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
        <!-- 底部金额结算 -->
        <view class="good_con_merchant">
          <view class="good_con_mer_checkout" @tap="openShopCar()">
            <view class="good_con_shop_car">
              <image
                :src="`../../static/image/shop/${
                  totalNum > 0 ? 'shopCarActive' : 'shopCar'
                }.svg`"
              ></image>
              <view v-if="totalNum > 0" class="good_con_shopcar_num">
                {{ totalNum }}
              </view>
            </view>
            <view class="good_merchant_distribute">
              <view class="merchant_price"> 共¥{{ totalPrice }}元 </view>
              <view class="merchant_free">
                <text>免配送费</text>
              </view>
            </view>
            <view class="good_merchant_checkout" @click.stop="tocheckout()">
              结算
            </view>
          </view>
        </view>
      </view>

      <!-- 评价 -->
      <view class="good_con_evaluate" v-if="goodType == 2">
        <view class="evaluate_comments">
          <view
            class="evaluate_comment"
            v-for="(item, index) in commentList"
            :key="index"
          >
            <view class="comment_hd">
              <view class="comment_info">
                <view class="comment_stars">
                  <uni-rate
                    :value="Number(item.start)"
                    readonly
                    activeColor="rgba(255, 141, 26, 1)"
                  ></uni-rate>
                </view>
              </view>
              <view class="comment_time">
                {{ item.createTime }}
              </view>
            </view>
            <view class="comment_bd">
              <view class="comment_content">
                {{ item.comment }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 购物车弹窗 -->
    <transition appear name="type">
      <view class="good_cartList" v-show="cartFlag == true">
        <view
          style="
            padding: 28rpx 24rpx;
            display: flex;
            flex-direction: column;
            flex: 1;
            height: 100%;
            overflow: hidden;
          "
        >
          <view class="cartList_hd">
            <view class="cartList_clear" @click="clearCart()">
              <image src="../../static/image/shop/delete.svg" mode=""></image>
              清空购物车
            </view>
            <view class="cartList_hd_title"> 已选商品 </view>
            <view class="good_type_close" @tap="closeCart()">
              <uni-icons type="closeempty" size="20" color="#666"></uni-icons>
            </view>
          </view>
          <view class="carList_bd">
            <view
              class="cartList_item"
              v-for="(item, index) in carDishesList"
              :key="index"
            >
              <view class="cartList_item_img">
                <image
                  v-if="item.goodsImg"
                  :src="domain + item.goodsImg"
                  mode="aspectFill"
                ></image>
              </view>
              <view class="cartList_item_info">
                <view class="cartList_item_title">
                  {{ item.name }}
                </view>
                <view v-if="item.sku" class="cartList_item_tags">
                  {{ item.sku }}
                </view>
                <view class="carList_item_price"> ¥{{ item.price }} </view>

                <view class="good_types_nums">
                  <view
                    class="good_con_item_dec"
                    @click="carSubAndAddGood(item, 'sub')"
                  >
                    <image src="../../static/image/shop/min.png"></image>
                  </view>
                  <view class="good_con_item_num">
                    {{ item.num }}
                  </view>
                  <view
                    class="good_con_item_add"
                    @click="carSubAndAddGood(item, 'add')"
                  >
                    <image src="../../static/image/shop/add.png"></image>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </transition>

    <!-- 选择规格弹窗 -->
    <view class="cancel_mask" v-show="skuFlag == true">
      <view
        v-for="(item, index) in specVos"
        :key="index"
        style="margin-bottom: 30rpx"
      >
        <view style="margin-bottom: 20rpx; font-weight: bolder">
          {{ item.name }}
        </view>
        <view style="display: flex; flex-wrap: wrap">
          <view
            v-for="(_, i) in item.options"
            :key="i"
            :class="
              _.check == true ? 'cancel_mask_item' : 'cancel_mask_item_un'
            "
            @tap="selectSku(item, i, _)"
          >
            {{ _.name }}
          </view>
        </view>
      </view>
      <view class="cancel_mask_bottom">
        <view class="cancel_mask_price"> 总计: ¥{{ skuPrice }} </view>
        <view class="cancel_mask_add" @tap="addCart()"> + 加入购物车 </view>
      </view>
    </view>

    <!-- 遮罩层 -->
    <view class="mask" v-if="maskFlag == true" @tap="closeSpecs()"></view>
  </view>
</template>

<script>
import {
  getTypeList,
  getGoodsList,
  getBusinessComment,
  getGoodsDetail,
} from "../../api/api.js";
import server_url from "../../api/config.js";
import money from "../../utils/money";
export default {
  data() {
    return {
      domain: server_url,
      storeId: "",
      goodType: 1,
      commentList: [],
      typeList: [], //商品所有的类型
      goodsList: [], //所有商品
      gouWuCarList: [], //选择的sku商品

      cartFlag: false, //购物车弹窗
      skuFlag: false, //规格弹窗
      maskFlag: false, //遮罩层

      // sku
      skuVos: [], //sku组合和价格
      specVos: [], //规格
      skuPrice: 0, //sku选择完后的总价
      currentGoods: null,
      skuPath: null,

      scrollHeight: 400,
      scrollTopSize: 0, // 默认顶部高度
      topArr: [], // 左侧列表元素
      leftIndex: 0, // 点击切换存储的下标
      scrollInto: "",
      leftScrollInto: "",
    };
  },
  computed: {
    //商品和分类的对应关系
    typeAndGoodList() {
      let list = this.typeList.map((item) => {
        return {
          ...item,
          goodsList: this.goodsList.filter(
            (data) => data.categotyId == item.id
          ),
        };
      });
      return list;
    },
    evaluateTypes() {
      const evaluateTypes = [
        {
          name: "全部",
          active: true,
          type: "",
          number: null,
        },
        {
          name: "好评",
          active: false,
          type: 1,
          number: 23,
        },
        {
          name: "中评",
          active: false,
          type: 2,
          number: 0,
        },
        {
          name: "差评",
          active: false,
          type: 3,
          number: 1,
        },
      ];
      return evaluateTypes;
    },
    goodTypeList() {
      const goodTypeList = [
        {
          label: "辣度",
          list: [
            {
              name: "香辣",
              active: true,
            },
            {
              name: "微辣",
              active: false,
            },
            {
              name: "麻辣",
              active: false,
            },
            {
              name: "特辣",
              active: false,
            },
          ],
        },
        {
          label: "分量",
          list: [
            {
              name: "大份",
              active: true,
            },
            {
              name: "中份",
              active: false,
            },
            {
              name: "小份",
              active: false,
            },
          ],
        },
      ];
      return goodTypeList;
    },
    goodTab() {
      return [
        {
          name: "点餐",
          type: 1,
        },
        {
          name: "评价",
          type: 2,
        },
      ];
    },
    // 总计金额
    totalPrice() {
      let totalPrice = 0;
      this.carDishesList.map((item) => {
        if (item.num) {
          totalPrice += money.cheng(item.price, item.num);
        }
      });
      return totalPrice.toFixed(2);
    },
    // 总计数量
    totalNum() {
      let totalNum = 0;
      this.carDishesList.map((item) => {
        if (item.num) totalNum += item.num;
      });
      return totalNum;
    },
    // 购物车商品
    carDishesList() {
      const list = [];
      this.goodsList
        .filter((item) => item.specType == 1)
        .map((v) => {
          if (v.num) list.push(v);
        });
      this.gouWuCarList.map((v) => {
        if (v.num) list.push(v);
      });
      return list;
    },
  },
  onShow() {
    this.getComment();
  },
  onLoad(options) {
    // this.storeId = 151;
    this.storeId = options.id;
    this.getType();
  },
  methods: {
    getType() {
      getTypeList({ businessId: this.storeId }).then((res) => {
        this.typeList = res.data;
        if (this.typeList && this.typeList.length) {
          this.copyGetGoods();
        }
      });
    },
    // 获取所有商品
    async copyGetGoods() {
      try {
        uni.showLoading({
          title: "加载中,请稍后...",
        });
        Promise.all(
          this.typeList.map((item) =>
            getGoodsList({
              businessId: this.storeId,
              categotyId: item.id,
            })
          )
        )
          .then((res) => {
            let list = res.map((item) => item.data).flat();
            this.goodsList = list.map((item) => {
              item.num = 0;
              if (item.specType == 2) item.sku = "";
              return item;
            });
            setTimeout(() => {
              this.getProListHeight();
            });
          })
          .finally(() => {
            setTimeout(() => {
              uni.hideLoading();
            }, 1500);
          });
      } catch (error) {
        uni.hideLoading();
      }
    },
    // 回退
    backref() {
      uni.navigateBack({
        delta: 1,
      });
    },
    // 获取高度
    getProListHeight() {
      const query = uni.createSelectorQuery().in(this);
      const queryTop = uni.createSelectorQuery().in(this);
      query.selectAll(".good_con_list").boundingClientRect();
      queryTop.select(".good_con_aside").boundingClientRect();
      queryTop.exec((res) => {
        this.scrollTopSize = Math.floor(res[0].top);
        this.scrollHeight = Math.floor(res.height);
      });
      query.exec((res) => {
        let topArr = res[0].map((item) =>
          Math.floor(item.top - this.scrollTopSize)
        );
        this.topArr = topArr;
      });
    },
    // 右侧商品滚动
    rightScroll(e) {
      clearTimeout(this.mainThrottle);
      this.mainThrottle = setTimeout(() => {
        scrollFn();
      }, 10);
      let scrollFn = () => {
        let top = e.detail.scrollTop + this.scrollTopSize;
        let index = 0;
        this.topArr.forEach((item, i) => {
          if (top >= item) {
            index = i;
            this.leftIndex = index < 0 ? 0 : index;
            this.leftScrollInto = "nav" + this.leftIndex;
          }
        });
      };
    },
    // tab切换
    changeTab(item) {
      this.goodType = item.type;
    },

    // 单个移除购物车
    decGood(item, order) {
      if (item.num > 0) {
        const obj = this.goodsList.find((_) => _.id == item.id);
        obj.num--;
      }
    },

    // 单个加入购物车
    addGood(item, order) {
      const obj = this.goodsList.find((_) => _.id == item.id);
      obj.num++;
    },

    //点击规格打开规则弹窗
    selectSpecs(item, index) {
      this.skuVos = [];
      this.specVos = [];
      this.skuPrice = 0;
      this.skuPath = null;

      this.currentGoods = item;

      // 获取规格信息
      getGoodsDetail({ id: item.id })
        .then((res) => {
          // console.log("[ res.data ] >", res.data);
          let { skuVos, specVos } = res.data;
          this.skuVos = skuVos;
          this.specVos = specVos.map((sv) => ({
            id: sv.id,
            name: sv.name,
            options: sv.options.map((item) => ({ name: item, check: false })),
          }));

          // 打开规格弹窗和遮罩
          this.skuFlag = true;
          this.maskFlag = true;
        })
        .catch(() => {
          uni.showToast({
            icon: "none",
            duration: 2000,
            title: "获取商品详情失败",
          });
        });
    },

    // 选择规格类型
    selectSku(item, i, _) {
      let specVos = this.specVos;
      item.options.forEach((v) => (v.check = false));
      _.check = true;
      let arr = [];
      specVos.forEach((v) => {
        const obj = v.options.find((item) => item.check);
        if (obj) arr.push(obj);
      });
      let skuPath = arr.map((item) => item.name).join("_");
      const foundSku = this.skuVos.find((item) => item.sku === skuPath);
      if (foundSku) {
        this.skuPrice = foundSku.price.toFixed(2);
        this.skuPath = skuPath;
      }
    },

    // 规格弹窗--加购物车
    addCart() {
      if (!this.skuPath) {
        uni.showToast({
          icon: "none",
          duration: 3000,
          title: `请选完规格！`,
        });
      } else {
        // 对应商品总数量加一
        this.goodsList.forEach((v) => {
          if (v.id == this.currentGoods.id) v.num++;
        });

        // 选择的sku商品
        const skuGoods = {
          ...this.currentGoods,
          sku: this.skuPath,
          price: this.skuPrice,
          sku_id: `${this.skuPath}_${this.currentGoods.id}`,
        };
        if (this.gouWuCarList.length === 0) {
          this.gouWuCarList.push(skuGoods);
        } else {
          const obj = this.gouWuCarList.find(
            (item) => item.sku_id === skuGoods.sku_id
          );
          if (obj) obj.num++;
          else this.gouWuCarList.push({ ...skuGoods, num: 1 });
        }
        this.closeSpecs();
      }
    },

    // 关闭遮罩层
    closeSpecs() {
      this.skuFlag = false;
      this.maskFlag = false;
      this.cartFlag = false;
    },

    // 打开购物车
    openShopCar() {
      if (this.carDishesList.length === 0) return;
      this.cartFlag = true;
      this.maskFlag = true;
    },

    // 关闭购物车
    closeCart() {
      this.cartFlag = false;
      this.maskFlag = false;
    },

    // 清空购物车
    clearCart() {
      this.goodsList.forEach((_) => {
        _.num = 0;
      });
      this.gouWuCarList = [];
      this.cartFlag = false;
      this.maskFlag = false;
    },

    //购物车加减
    carSubAndAddGood(goods, type) {
      let _ = type === "add" ? 1 : -1;
      this.$nextTick(() => {
        if (type === "sub" && this.carDishesList.length == 0) {
          this.maskFlag = false;
          this.cartFlag = false;
        }
      });
      if (type === "sub" && goods.num == 0) return;
      if (goods.specType === 2) {
        // 规格产品
        const obj = this.gouWuCarList.find(
          (item) => item.id == goods.id && item.sku == goods.sku
        );
        if (obj) obj.num += _;
        this.goodsList.find((item) => item.id == goods.id).num += _;
      } else {
        const obj = this.goodsList.find(
          (item) => item.id == goods.id && item.specType == 1
        );
        if (obj) obj.num += _;
      }
    },

    // 前往结算页面
    tocheckout() {
      if (this.carDishesList.length === 0) {
        uni.showToast({
          icon: "none",
          duration: 3000,
          title: "请选择商品",
        });
      } else {
        uni.navigateTo({
          url:
            "/pages/shop/checkout?data=" +
            encodeURIComponent(JSON.stringify(this.carDishesList)) +
            "&stordId=" +
            encodeURIComponent(JSON.stringify(this.storeId)),
        });
      }
    },

    // 选择商品分类
    selectType(index) {
      this.leftIndex = index;
      this.scrollInto = "nav" + index;
    },

    getComment() {
      getBusinessComment({ businessId: this.storeId }).then((res) => {
        this.commentList = res.rows;
      });
    },
  },
};
</script>
<style lang="scss">
::v-deep uni-swiper .uni-swiper-dot {
  background-color: rgba(255, 255, 255, 0.5);
  width: 48rpx;
  height: 6rpx;
  border-radius: 0;
}

::v-deep uni-swiper .uni-swiper-dot-active {
  background-color: #2588ff;
}
.type-enter-active {
  animation: inventory 0.2s linear;
}
.type-leave-active {
  animation: inventory 0.2s linear reverse;
}
@keyframes inventory {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}
.navigation_bg {
  height: 360rpx;
  width: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 141, 26, 1) 12.5%,
    rgba(255, 195, 0, 1) 100%
  );

  // background: url('../../static/image/shop/detailBg.png') no-repeat;
  background-size: cover;
}

.navigation {
  width: 100%;
  height: 160rpx;
  padding: 60rpx 24rpx 0;
  text-align: center;
  position: absolute;
  z-index: 2;

  .navigation_back {
    position: absolute;
    top: 70rpx;
  }

  .navigation_title {
    color: #fff;
    font-size: 36rpx;
  }
}

.good_con {
  height: calc(100% - 360rpx);
  display: flex;
  flex: 1;
  flex-direction: column;
  .good_info {
    padding: 26rpx 28rpx;
    border-radius: 12rpx;
    background-color: #fff;
    margin-top: -140rpx;
    box-shadow: 0px 4px 8px rgba(37, 136, 255, 0.06);
    .good_info_hd {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .good_info_msg {
        width: 75%;
        .good_info_title {
          font-size: 36rpx;
          font-weight: 700;
          color: #2e343a;
        }
        .good_info_brief {
          color: #9098a0;
          font-size: 24rpx;
        }
      }
      .good_info_img {
        width: 120rpx;
        height: 120rpx;
        image {
          width: 100%;
          height: 100%;
          border-radius: 12rpx;
        }
      }
    }
    .good_info_notice {
      image {
        width: 28rpx;
        height: 26rpx;
        margin-right: 10rpx;
      }
      text {
        font-size: 24rpx;
        color: #9098a0;
      }
    }
  }
  .good_tabs {
    display: flex;
    margin-top: 56rpx;
    padding: 0 20rpx;
    .good_tab {
      margin-right: 80rpx;
      position: relative;
      font-size: 32rpx;
      color: #2e343a;
      font-weight: 500;
      &.active {
        .good_tab_line {
          display: block;
        }
      }
      .good_tab_line {
        display: none;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 6rpx;
        background-color: rgba(255, 141, 26, 1);
      }
    }
  }
  .good_con_detail {
    margin-top: 20rpx;
    padding: 0 20rpx;
    padding-bottom: 200rpx;
    display: flex;
    flex: 1;
    height: calc(100% - 250rpx);
    .good_con_aside {
      .good_aside_tab {
        color: #9098a0;
        font-size: 28rpx;
        padding: 20rpx 0;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        &.active {
          color: #333;
          font-weight: 700;
        }
        .good_aside_tab_num {
          position: absolute;
          top: -15rpx;
          right: 8rpx;
          border: 2rpx solid #fff;
          background-color: #ffb226;
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
        }
      }
    }
    .good_con_list {
      // width: 80%;
      padding-top: 20rpx;
      padding-left: 20rpx;
      // overflow-y: auto;
      .good_con_list_title {
        color: #969696;
        font-weight: bolder;
      }
      .good_con_item {
        position: relative;
        display: flex;
        margin-top: 20rpx;
        .good_con_item_img {
          flex-shrink: 0;
          image {
            width: 162rpx;
            height: 162rpx;
            border-radius: 12rpx;
          }
        }
        .good_con_item_info {
          margin-left: 32rpx;
          .good_con_item_title {
            color: #2e343a;
            font-size: 28rpx;
            font-weight: 700;
          }
          .good_con_item_price {
            color: #ff2626;
            font-size: 32rpx;
            margin-top: 60rpx;
          }
        }
        .good_con_item_type {
          position: absolute;
          bottom: 10rpx;
          right: 0;
          width: 86rpx;
          height: 40rpx;
          background-color: #ff8d1a;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 26rpx;
          color: #ffffff;
          border-radius: 40rpx;
          .good_con_item_type_num {
            position: absolute;
            top: -35rpx;
            right: 8rpx;
            border: 2rpx solid #fff;
            background-color: #ffb226;
            width: 40rpx;
            height: 40rpx;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        .good_con_item_nums {
          position: absolute;
          bottom: 0;
          right: 0;
          display: flex;
          align-items: center;
          .good_con_item_dec {
            image {
              width: 40rpx;
              height: 40rpx;
            }
          }
          .good_con_item_num {
            margin: 0 16rpx;
            font-size: 28rpx;
            color: #2e343a;
            margin-top: -10rpx;
          }
          .good_con_item_add {
            image {
              width: 40rpx;
              height: 40rpx;
            }
          }
        }
      }
    }
    .good_con_merchant {
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 5;
      width: 100%;
      padding: 20rpx 0;
      padding-bottom: var(--status-bar-height);
      background-color: #fff;
      // padding: 0 24rpx;
      display: flex;
      align-items: center;
      .good_con_mer_checkout {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 100rpx;
        border-radius: 100rpx;
        padding-left: 55rpx;
        padding-right: 8rpx;
        .good_merchant_distribute {
          font-size: 28rpx;
          width: 100%;
          height: 100%;
          background-color: #3a3635;
          padding-left: 80rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .merchant_price {
            color: #fff;
          }
          .merchant_free {
            text {
              color: #999999;
              font-size: 20rpx;
            }
          }
        }
        .good_merchant_min {
          color: #999999;
          font-size: 28rpx;
        }
        .good_con_shop_car {
          position: absolute;
          left: 8rpx;
          top: -18rpx;
          image {
            width: 90rpx;
            height: 120rpx;
          }
          .good_con_shopcar_num {
            position: absolute;
            top: 0;
            right: -18rpx;
            border: 2rpx solid #fff;
            background-color: #2288ff;
            color: #fff;
            width: 40rpx;
            height: 40rpx;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
      .good_merchant_checkout {
        // position: absolute;
        // right: 0;
        flex-shrink: 0;
        width: 192rpx;
        height: 100rpx;
        background-color: rgba(255, 141, 26, 1);
        border-top-right-radius: 200rpx;
        border-bottom-right-radius: 200rpx;
        font-size: 30rpx;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .good_con_evaluate {
    margin-top: 20rpx;
    padding-bottom: 200rpx;
    .good_con_score {
      display: flex;
      align-items: center;
      .score_num {
        font-size: 80rpx;
        color: #2588ff;
        font-weight: bolder;
      }
      .score_right {
        margin-left: 20rpx;
        .score_stars {
          display: flex;
          image {
            width: 16rpx;
            height: 16rpx;
            margin-right: 8rpx;
          }
        }
        .score_type_num {
          color: #9098a0;
          font-size: 24rpx;
        }
      }
    }
    .evaluate_types {
      display: flex;
      align-items: center;
      margin-top: 15rpx;
      .evaluate_type {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26rpx;
        color: #2e343a;
        font-weight: 500;
        margin-right: 30rpx;
        width: 130rpx;
        height: 56rpx;
        border-radius: 56rpx;
        &.active {
          background-color: #2588ff;
          color: #fff;
        }
      }
    }
    .evaluate_comments {
      margin-top: 30rpx;
      .evaluate_comment {
        margin-bottom: 20rpx;
        .comment_hd {
          position: relative;
          display: flex;
          align-items: center;
          .comment_attr {
            image {
              width: 80rpx;
              height: 80rpx;
              border-radius: 50%;
            }
          }
          .comment_info {
            margin-left: 16rpx;
            .comment_name {
              font-size: 28rpx;
              color: #2e343a;
              font-weight: 500;
            }
            .comment_stars {
              display: flex;
              margin-top: 10rpx;
              image {
                width: 16rpx;
                height: 16rpx;
                margin-right: 8rpx;
              }
            }
          }
          .comment_time {
            position: absolute;
            right: 0;
            font-size: 24rpx;
            color: #9098a0;
          }
        }

        .comment_bd {
          .comment_content {
            font-size: 30rpx;
            color: #2e343a;
            text-align: justify;
          }

          .comment_imgs {
            display: flex;
            margin-top: 24rpx;

            image {
              width: 200rpx;
              height: 200rpx;
              border-radius: 12rpx;
              margin-right: 16rpx;
            }
          }
        }
        .comment_bt {
          margin-top: 24rpx;
          padding: 16rpx;
          font-size: 26rpx;
          color: #2e343a;
          background-color: #f9fbfc;
        }
      }
    }
  }

  .good_shop_info {
    margin-top: 20rpx;

    .good_shop_info_title {
      font-size: 32rpx;
      color: #333333;
      font-weight: 700;
    }

    .good_shop_swiper {
      margin-top: 24rpx;
      width: 100%;
      height: 260rpx;

      .swiper {
        height: 260rpx;
      }

      .swiper-item {
        width: 100%;
        height: 260rpx;
      }

      image {
        width: 100%;
        height: 100%;
      }
    }

    .good_shop_info_list {
      margin-top: 24rpx;
      background-color: #f9fbfc;
      padding: 24rpx;
      border-radius: 12rpx;

      .good_shop_info_item {
        position: relative;
        display: flex;
        margin-bottom: 24rpx;

        .good_shop_info_icon {
          margin-right: 18rpx;

          image {
            width: 32rpx;
            height: 32rpx;
          }
        }

        text {
          font-size: 28rpx;
          color: #2e343a;
        }

        .call_phone {
          position: absolute;
          right: 24rpx;
          font-size: 24rpx;
          color: #2288ff;
          font-weight: 500;
        }
      }
    }
  }
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.5);
}

.cancel_mask {
  position: fixed;
  z-index: 5;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 12rpx;
  background: #fff;
  height: 60%;
  width: 80%;
  padding: 37rpx;

  .cancel_mask_item {
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: #ffb226;
    padding: 6rpx 13rpx;
    border-radius: 11rpx;
  }

  .cancel_mask_item_un {
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 6rpx 13rpx;
    border-radius: 11rpx;
    border: 1px solid #d8d6d6;
  }

  .cancel_mask_bottom {
    position: absolute;
    bottom: 14px;
    display: flex;
    justify-content: space-between;
    width: 90%;

    .cancel_mask_price {
      color: red;
    }

    .cancel_mask_add {
      background-color: #ffb226;
      padding: 6rpx 13rpx;
      border-radius: 11rpx;
    }
  }
}

.good_type {
  position: fixed;
  bottom: 200rpx;
  left: 0;
  width: 100%;
  z-index: 5;
  background-color: #fff;
  padding: 28rpx 24rpx;
  border-radius: 16rpx 16rpx 0 0;

  .good_type_close {
    position: absolute;
    top: 24rpx;
    right: 24rpx;
  }

  .good_type_select {
    font-size: 24rpx;
    color: #2e343a;
  }

  .good_type_info {
    display: flex;
    margin-top: 30rpx;

    .good_type_info_img {
      image {
        width: 162rpx;
        height: 162rpx;
        border-radius: 12rpx;
      }
    }

    .good_type_info_msg {
      margin-left: 32rpx;

      .good_type_info_name {
        color: #2e343a;
        font-size: 32rpx;
        font-weight: 700;
      }

      .good_type_info_price {
        font-size: 32rpx;
        color: #ff2626;
        font-weight: 700;
        margin-top: 60rpx;
      }
    }
  }

  .good_type_num_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30rpx;

    .good_type_label {
      font-size: 24rpx;
      color: #2e343a;
    }

    .good_types_nums {
      display: flex;
      align-items: center;

      .good_con_item_dec {
        image {
          width: 40rpx;
          height: 40rpx;
        }
      }

      .good_con_item_num {
        margin: 0 16rpx;
        font-size: 28rpx;
        color: #2e343a;
        margin-top: -10rpx;
      }

      .good_con_item_add {
        image {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
  }

  .good_type_item {
    margin-top: 20rpx;

    .good_type_label {
      font-size: 28rpx;
      color: #2e343a;
    }

    .good_type_list {
      margin-top: 12rpx;
      display: flex;
      flex-wrap: wrap;

      .good_type_item {
        margin-right: 16rpx;
        width: 152rpx;
        height: 56rpx;
        border-radius: 56rpx;
        background-color: #f9fbfd;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
        color: #2e343a;

        &.active {
          background-color: #2588ff;
          color: #fff;
        }
      }
    }
  }
}

.good_cartList {
  position: fixed;
  bottom: calc(100rpx + var(--status-bar-height) + 20rpx);
  left: 0;
  width: 100%;
  z-index: 5;
  background-color: #fff;
  border-radius: 16rpx 16rpx 0 0;
  max-height: 60vh;
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow-y: auto;
  .cartList_hd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20rpx;
    .cartList_hd_title {
      font-size: 24rpx;
      color: #2e343a;
    }

    .cartList_clear {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #2e343a;

      image {
        width: 26rpx;
        height: 26rpx;
        margin-right: 4rpx;
      }
    }
  }

  .carList_bd {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    &::-webkit-scrollbar {
      display: none; /* 隐藏滚动条 */
    }
    .cartList_item {
      position: relative;
      margin-top: 20rpx;
      display: flex;

      .cartList_item_img {
        image {
          width: 162rpx;
          height: 162rpx;
          border-radius: 12rpx;
        }
      }

      .cartList_item_info {
        margin-left: 24rpx;

        .cartList_item_title {
          font-size: 28rpx;
          color: #2e343a;
          font-weight: 700;
        }

        .cartList_item_tags {
          font-size: 24rpx;
          color: #9098a0;
          margin-top: 10rpx;
        }

        .carList_item_price {
          font-size: 32rpx;
          color: #ff2626;
          margin-top: 30rpx;
        }
      }

      .good_types_nums {
        position: absolute;
        bottom: 0;
        right: 0;
        display: flex;
        align-items: center;

        .good_con_item_dec {
          image {
            width: 40rpx;
            height: 40rpx;
          }
        }

        .good_con_item_num {
          margin: 0 16rpx;
          font-size: 28rpx;
          color: #2e343a;
          margin-top: -10rpx;
        }

        .good_con_item_add {
          image {
            width: 40rpx;
            height: 40rpx;
          }
        }
      }
    }
  }
}
.good_detail {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100vh;
}
</style>
